<script src="public/js/jquery-1.6.js"></script>
<script src="public/js/slides.min.jquery.js"></script>
<style type="text/css">
#container { width:580px; padding:10px; margin:0 auto; position:relative; z-index:0; }
#example { width:600px; height:350px; position:relative; }
#ribbon { position:absolute; top:-3px; left:-15px; z-index:500; }
#frame { position:absolute; z-index:0; width:739px; height:341px; top:-3px; left:-80px; }
#slides { position:absolute; top:15px; left:4px; z-index:100; }
.slides_container { width:570px; overflow:hidden; position:relative; display:none; }
.slides_container div.slide { width:570px; height:270px; display:block; }
#slides .next,#slides .prev { position:absolute; top:107px; left:-39px; width:24px; height:43px; display:block; z-index:101; }
#slides .next { left:585px; }
.pagination { margin:26px auto 0; width:100px; }
.pagination li { float:left; margin:0 1px; list-style:none; }
.pagination li a { display:block; width:12px; height:0; padding-top:12px; background-image:url(http://myframe/upload/b9d3363f6f54b61cae2f85bb3eef3ab4.png); background-position:0 0; float:left; overflow:hidden; }
.pagination li.current a { background-position:0 -12px; }
.caption { z-index:500; position:absolute; bottom:-35px; left:0;   padding:5px 20px 0 20px; background:#000; background:rgba(0,0,0,.5); width:540px; font-size:1.3em; line-height:1.33; color:#fff; border-top:1px solid #000; text-shadow:none; }
</style>
<div id="container">
<div id="example">
			<img src="http://myframe/upload/5aa5fd94f75731179a2b51369c78b760.png" width="112" height="112" alt="New Ribbon" id="ribbon">
			<div id="slides">
				<div class="slides_container">
<?php 
$num = $data['num'];
$d = json_decode(str_replace('%2F',"u",$data['json']));
for($i=$num-1;$i>=0;$i--){
if(!empty($d->img[$i])){
?>	
					<div class="slide">
						<a href="<?php echo $d->url[$i]; ?>" title="<?php echo $d->title[$i]; ?>" target="_blank"><img src="<?php echo $d->img[$i]; ?>" width="570" height="270" alt="<?php echo $d->title[$i]; ?>"></a>
						<div class="caption" style="bottom:0">
							<p><?php echo $d->title[$i]; ?></p>
						</div>
					</div>
<?php 
}
}
?>
				</div>

				<a href="#" class="prev"><img src="http://myframe/upload/5e7be7bdf98b2e4ad9dac728a9ab3989.png" width="24" height="43" alt="Arrow Prev"></a>
				<a href="#" class="next"><img src="http://myframe/upload/b5093ece2d5f2f70c237f9f3d95fa6dc.png" width="24" height="43" alt="Arrow Next"></a>
			</div>
			<img src="http://myframe/upload/889398992f46883b59089c852293f6fa.png" width="739" height="341" alt="Example Frame" id="frame">
		</div>
</div>
<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'http://myframe/upload/0a0832f4253d683dd3f6b9611b38f676.gif',
				play: 5000,
				pause: 10000500,
				hoverPause: true,
				animationStart: function(current){
					$('.caption').animate({
						bottom:-35
					},100);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationStart on slide: ', current);
					};
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationComplete on slide: ', current);
					};
				},
				slidesLoaded: function() {
					$('.caption').animate({
						bottom:0
					},200);
				}
			});
		});
	</script>